<template>
	<view class="baseInput">
		<view class="inputBox2">
			<image class="img1" src="/static/image/universal/search.png" mode=""></image>
			<input class="input" type="text" placeholder="请输入搜索内容" v-model="inputValue"
			placeholder-style="color: #A7AEBD;font-weight: 500;"  @input="inputChange" />
			<image v-if="isShowVoice" class="img2" src="/static/image/universal/voice.png" mode=""></image>
			<image v-else class="img2" src="/static/image/login/del1.png" mode="" @click="clearInput"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "baseInput",
		props:{
			isShowVoice: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				inputValue: "",
			}
		},
		methods: {
			inputChange(e){
				this.inputValue = e.detail.value
				this.$emit("inputChange", e.detail.value)
				// console.log(e.detail.value,'eee')
			},
			
			clearInput(){
				console.log('00000000000000000')
				this.inputValue = ""
				this.$emit("clearInput")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.baseInput{
		.inputBox2{
			width: 100%;
			height: 88rpx;
			position: relative;
			.input{
				width: 100%;
				height: 100%;
				background-color: #F5F7FA;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding: 0rpx 90rpx;
				box-sizing: border-box;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 500;
				color: #2F80ED;
				border-radius: 44rpx;
			}
			.img1{
				position: absolute;
				top: 22rpx;
				left: 30rpx;
				width: 48rpx;
				height: 48rpx;
			}
			.img2{
				position: absolute;
				width: 48rpx;
				height: 48rpx;
				top: 22rpx;
				right: 30rpx;
			}
		}
	}
</style>
